<template>
    <div id="inspection-route" class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div v-if="$hasPer('InspectionRoute:add') || $hasPer('InspectionRoute:batchUpload') || $hasPer('InspectionRoute:batchEnd') || $hasPer('InspectionRoute:excel')" style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item >
                            <el-button v-if="$hasPer('InspectionRoute:add')" @click="nodeClick('')" icon="ele-Plus" type="primary"> 新增 </el-button>
                            <el-button v-if="$hasPer('InspectionRoute:batchUpload')"  @click="batchHandle(1,getData)" icon="ele-Refresh"> 批量启用 </el-button>
                            <el-button v-if="$hasPer('InspectionRoute:batchEnd')"  @click="batchHandle(2,getData)" icon="ele-Refresh"> 批量停用 </el-button>
                            <el-button v-if="$hasPer('InspectionRoute:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <el-table 
                                        ref="excelRef"
                                        :data="list" 
                                        class="w-h-100" 
                                        style="width: 100%" 
                                        border 
                                        v-loading="loading" 
                                        element-loading-background="rgba(0, 0, 0, 0.5)"
                                        @selection-change="handleSelectionChange"
                                    >
                                        <el-table-column type="selection" width="55" />

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="巡检线路名称"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Name" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_Name">{{ scope.row.v_Name }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="部门名称"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Org" typeVal="cascader" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_OrgName">{{ scope.row.v_OrgName }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="层级"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="i_Levele" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span v-if="scope.row.v_Levele">{{ scope.row.v_Levele }}</span>
                                                    <span v-else> - </span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column min-width="200" :show-overflow-tooltip="true" label="是否启用"  align="center">
                                            <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                <template #header>
                                                    <SearchModel typeId="s_Use" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                </template>
                                                <template #default="scope">
                                                    <span style="color: #67C23A;" v-if="scope.row.isUse">是</span>
                                                    <span style="color: #E6A23C;" v-else>否</span>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                        <el-table-column width="180" :show-overflow-tooltip="true" label="查看巡检点"  align="center" fixed="right">
                                            <template #default="scope">
                                                <el-popover 
                                                    placement="left" 
                                                    width="55%" 
                                                    trigger="click"
                                                >
                                                    <template #reference>
                                                        <el-button @click="viewClick(scope.row)" class="icon-e" icon="ele-View" text type="warning">查看</el-button>
                                                    </template>
                                                    <div class="search-s">
                                                        <div class="search-s-l">
                                                            <!-- <el-input v-model="filterSearch" placeholder="请输入分析单元名称" clearable /> -->
                                                            <!-- <el-select 
                                                                filterable
                                                                placeholder="请选择分析单元" 
                                                                v-model="filterSearch"
                                                                @mousedown.native.prevent
                                                            >
                                                                <el-option
                                                                    v-for="val in unitArr"
                                                                    :key="val.id"
                                                                    :label="val.v_Name"
                                                                    :value="val.id"
                                                                />
                                                            </el-select> -->
                                                            <!-- <el-button style="margin-left: 10px;" @click='activeClick(0)' icon="ele-Search" type="primary"> 查询 </el-button>
                                                            <el-button  @click="activeClick(1)" icon="ele-Refresh"> 重置 </el-button> -->
                                                        </div>
                                                        <!-- <el-button @click="closeHandle(scope.row)" class="icon-e" icon="ele-CloseBold" text type="primary">关闭</el-button> -->
                                                    </div>
                                                    <el-table class="grid-table" :data="gridData" border v-loading="gridLoading">
                                                        <el-table-column min-width="200" prop="n_Sort" label="巡检点顺序编号" :show-overflow-tooltip="true"  align="center" />
                                                        <el-table-column min-width="200" label="风险分析单元名称" :show-overflow-tooltip="true"  align="center">
                                                            <template #default="scope">
                                                                <span>{{ scope.row.analysisUnit.v_Name }}</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column min-width="200" label="所属分区名称" :show-overflow-tooltip="true"  align="center">
                                                            <template #default="scope">
                                                                <span v-if="scope.row.analysisUnit.v_RiskPartitionName">{{ scope.row.analysisUnit.v_RiskPartitionName }}</span>
                                                                <span v-else>-</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column min-width="200" label="责任部门名称" :show-overflow-tooltip="true"  align="center">
                                                            <template #default="scope">
                                                                <span v-if="scope.row.analysisUnit.v_ResponsibleDepName">{{ scope.row.analysisUnit.v_ResponsibleDepName }}</span>
                                                                <span v-else>-</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column min-width="200" label="责任人" :show-overflow-tooltip="true"  align="center">
                                                            <template #default="scope">
                                                                <span v-if="scope.row.analysisUnit.v_ResponsibleMan">{{ scope.row.analysisUnit.v_ResponsibleMan }}</span>
                                                                <span v-else>-</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column min-width="200" label="风险事件数量" :show-overflow-tooltip="true"  align="center">
                                                            <template #default="scope">
                                                                <span>{{ scope.row.analysisUnit.n_EventCount }}</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column min-width="200" label="危害因数数量" :show-overflow-tooltip="true"  align="center">
                                                            <template #default="scope">
                                                                <span>{{ scope.row.analysisUnit.n_DCListCount }}</span>
                                                            </template>
                                                        </el-table-column>
                                                        <el-table-column v-if="$hasPer('InspectionRoute:number') || $hasPer('InspectionRoute:delChildNode')" min-width="260" prop="v_Remark" label="操作" :show-overflow-tooltip="true"  align="center">
                                                            <template #default="scope">
                                                                <el-button v-if="$hasPer('InspectionRoute:number')" @click="activeClick(2,scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">变更巡检点顺序编号</el-button>
                                                                <el-button v-if="$hasPer('InspectionRoute:delChildNode')" @click="activeClick(3,scope.row.id)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                                            </template>
                                                        </el-table-column>
                                                    </el-table>
                                                    <el-pagination
                                                        v-model:currentPage="activePageNo"
                                                        v-model:page-size="activePageSize"
                                                        :total="activeTotalRows"
                                                        :page-sizes="[10, 20, 50, 100]"
                                                        small
                                                        background
                                                        @size-change="activeHandleSizeChange"
                                                        @current-change="activeHandleCurrentChange"
                                                        layout="total, sizes, prev, pager, next, jumper"
                                                        class="w-h-100"
                                                    />
                                                </el-popover>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="180" :show-overflow-tooltip="true" prop="createdTime" label="创建时间"  align="center" sortable>
                                            <template #default="scope">
                                                <span v-if="scope.row.createdTime">{{ scope.row.createdTime }}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="180" :show-overflow-tooltip="true" prop="updatedTime" label="更新时间"  align="center" sortable>
                                            <template #default="scope">
                                                <span v-if="scope.row.updatedTime">{{ scope.row.updatedTime }}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column width="420" label="操作" align="center" fixed="right">
                                            <el-table-column width="420" align="center">
                                                <template #header>
                                                    <el-button class="icon-e" @click='searchClick' icon="ele-Search" size="small" type="primary" text> 查询 </el-button>
                                                    <el-button class="icon-e clear-bg" style="background-color: transparent !important;" size="small" @click="resetClick" icon="ele-Refresh" text> 重置 </el-button>
                                                </template>
                                                <template 
                                                    v-if="
                                                    $hasPer('InspectionRoute:edit') || 
                                                    $hasPer('InspectionRoute:del') || 
                                                    $hasPer('InspectionRoute:addDot') || 
                                                    $hasPer('InspectionRoute:addProject') || 
                                                    $hasPer('InspectionRoute:isStart')" 
                                                    #default="scope"
                                                >
                                                    <div class="operate-s">
                                                        <template v-if="!scope.row.isUse">
                                                            <el-button v-if="$hasPer('InspectionRoute:edit')" @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                                            <el-button v-if="$hasPer('InspectionRoute:del')" @click="deleteHandle(scope.row.id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                                            <el-button v-if="$hasPer('InspectionRoute:addDot')" @click="funClick(scope.row,2)" class="icon-e" icon="ele-Discount" size="small" text type="warning">选择分析单元</el-button>
                                                            <el-button v-if="$hasPer('InspectionRoute:addProject')" @click="funClick(scope.row,1)" class="icon-e" icon="ele-Discount" size="small" text type="primary">新增巡检项目</el-button>
                                                            <el-button v-if="$hasPer('InspectionRoute:isStart')" @click="documentClick(scope.row,1 ,getData)" class="icon-e" icon="ele-Discount" size="small" text type="success">是否启用</el-button>
                                                        </template>
                                                        <el-button v-if="scope.row.isUse && $hasPer('InspectionRoute:isEnd')" @click="documentClick(scope.row,2, getData)" class="icon-e" icon="ele-Discount" size="small" text type="warning">是否停用</el-button>
                                                    </div>
                                                </template>
                                                <template 
                                                    v-if="
                                                    !$hasPer('InspectionRoute:edit') && 
                                                    !$hasPer('InspectionRoute:del') && 
                                                    !$hasPer('InspectionRoute:addDot') && 
                                                    !$hasPer('InspectionRoute:addProject') && 
                                                    !$hasPer('InspectionRoute:isStart')" 
                                                >
                                                    <el-button class="icon-e" size="small" text type="danger">暂无操作权限</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table-column>

                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <!-- 新增/编辑 -->
        <AddEditInspectionRoute
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @updateData="getData"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
        <!-- 选择风险分析单元 -->
        <AddEditRiskPoint
            :repairInfo="repairFunInfo"
            :isUseDialog="isFunDialog"
            @updateData="getData"
            @cancelFunClick="cancelFunClick"
            @controlFunClick="controlFunClick"
        />
        <!-- 新增巡检项目（风险点） -->
        <InspectionItem
            :repairInfo="repairItemInfo"
            :isUseDialog="isItemDialog"
            @updateData="getData"
            @cancelItemClick="cancelItemClick"
            @controlItemClick="controlItemClick"
        />
        <ChangeTxt
            :repairInfo="repairTexInfo"
            :isUseDialog="isTexDialog"
            @cancelTxtClick="cancelTxtClick"
            @controlTxtClick="controlTxtClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw } from 'vue';
import getTableData from '/@/utils/getTableData';
import { 
    SMSIPPathPage , 
    SMSIPPathDelete , 
    SMSIPPathUpdateIsUse , 
    SMSIPPathBathUpdateIsUse , 
    SMSIPPathUnitPage , 
    SMSIPPathUnitDelete , 
    SMSIPPathUnitList ,
    SMSDCAnalysisUnitList,
    SMSIPPathDetail,
} from '/@/api/centerControl/sms';
import AddEditInspectionRoute from '../component/sms/add-edit-InspectionRoute.vue';
import AddEditRiskPoint from '../component/sms/add-edit-risk-point.vue';
import ChangeTxt from '../component/sms/change-txt.vue';
import InspectionItem from '../component/sms/inspection-item.vue';
import { ElMessageBox , ElMessage } from 'element-plus';
import { sysOrgTree } from '/@/api/centerControl/pubilc';
import SearchModel from '../component/search-model.vue';
import { confirmFun } from '../component/messageTs';
import { exportToExcel } from '/@/utils/exportToExcel';

export default defineComponent( {
    name: 'inspection-route',
    components: {
        AddEditInspectionRoute,
        AddEditRiskPoint,
        ChangeTxt,
        InspectionItem,
        SearchModel,
    },
    setup(props){
        const isUseDialog = ref() // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref() // 传递子组件数据

        const isFunDialog = ref(false);
        const repairFunInfo = ref();
        const filterSearch = ref();
        let multipleSelection: any = [];

        const gridData = ref();
        const activePageNo = ref(1);
        const activePageSize = ref(10);
        const activeTotalRows = ref(0);
        let isRefactoring =  false; // 用户执行删除的时候判断是否需要重构数据
        let worlkId = 0;

        const repairTexInfo = ref();
        const isTexDialog = ref(false);

        const repairItemInfo = ref();
        const isItemDialog = ref();
        const unitArr = ref();
        const gridLoading = ref(false);

        /*** getWorlkFun 获取页中页数据 */
        const getWorlkFun = async(id:number) => {
            gridLoading.value = true;
            gridData.value = [];
            let param: any = {};
            param.l_IPPathId = id;
            param.pageNo = activePageNo.value;
            param.pageSize = activePageSize.value;
            if(filterSearch.value) param.l_AnalysisUnitId = filterSearch.value;
            try{
                let res: any = await SMSIPPathUnitPage(param);
                if(res.success){
                    activeTotalRows.value = res.data.totalRows;
                    if(res.data.rows.length === 1){
                        isRefactoring = true;
                    }else{
                        isRefactoring = false;
                    }
                }
                gridData.value = res.data.rows;
                gridLoading.value = false;
            }catch(err: any){
                gridLoading.value = false;
            }
        }
        /*** activeClick 页中页各类点击事件 */
        const activeClick = (num: number, val?: any) => {
            switch(num){
                case 0:
                    // 查询
                    getWorlkFun(worlkId);
                    break;
                case 1:
                    // 重置
                    filterSearch.value = '';
                    getWorlkFun(worlkId);
                    break;
                case 2:
                    // 变更序号
                    repairTexInfo.value = JSON.stringify(val);
                    isTexDialog.value = true;
                    break;
                case 3:
                    // 删除
                    activeDeleteFun(val);
                    break;
            }

        }
        /*** activeDeleteFun 页中页删除记录事件 */
        const activeDeleteFun = (id:Number) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                if(isRefactoring){
                    if(activePageNo.value > 1){
                        activePageNo.value -= 1
                    }
                }
                let param = {id : id}
                try {
                    let res:any = await SMSIPPathUnitDelete(param);
                    if(res.success){
                        getWorlkFun(worlkId);
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        }
        /*** closeHandle 页中页关闭弹出组件 */
        const closeHandle = (val: any) => {
            filterSearch.value = '';
            val.isVisible = false;
        }
        const activeHandleSizeChange = (val: any) => {
            // 每页的总数据
            activePageNo.value = 1;
            activePageSize.value = val;
            getWorlkFun(worlkId);
        }
        const activeHandleCurrentChange = (val: any) => {
            // 当前处于第几页
            activePageNo.value = val;
            getWorlkFun(worlkId);
        }

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:string | object) => {
            val !== '' ? repairInfo.value = JSON.stringify(toRaw(val)) : repairInfo.value = ''
            isUseDialog.value = true
        };
        
        /*** documentClick 单条数据启用/停用 */
        const documentClick = (val:any, num: number , uploadFun: Function) => {
            let param:any = {};
            param.id = val.id;
            if(num === 1){
                confirmFun('是否启用该条数据？','提示','warning','取消').then((isConfirmed: any) => {
                    if(isConfirmed){
                        param.isUse = true;
                        startEndFun(1,JSON.stringify(param),uploadFun);
                    }
                });
            }else{
                confirmFun('是否停用该条数据？','提示','warning','取消').then((isConfirmed: any) => {
                    if(isConfirmed){
                        param.isUse = false;
                        startEndFun(1,JSON.stringify(param),uploadFun);
                    }
                });
            }
        }
        /*** batchHandle 批量启用/停用 */
        const batchHandle = (num: number , uploadFun: Function) => {
            let param: any = {};
            let setBoole:any;
            let setArr:any = [];
            if(multipleSelection.length === 0){
                ElMessage({
                    type: 'warning',
                    message: '请选择需要更新的数据',
                });
                return;
            }else{
                multipleSelection.map((item: any) => {
                    setArr.push(item.id);
                });
                param.l_Ids = setArr;
            }
            if(num === 1){
                confirmFun('是否批量启用？','提示','warning','取消').then((isConfirmed: any) => {
                    if(isConfirmed){
                        param.isUse = true;
                        startEndFun(2,JSON.stringify(param),uploadFun);
                    }
                });
            }else{
                confirmFun('是否批量停用？','提示','warning','取消').then((isConfirmed: any) => {
                    if(isConfirmed){
                        param.isUse = false;
                        startEndFun(2,JSON.stringify(param),uploadFun);
                    }
                });
            }
        }
        /*** startEndFun 启用/停用函数 */
        const startEndFun = async(num: number, val: any , uploadFun: Function) => {
            let param = JSON.parse(val);
            let res:any;
            if(num === 1){
                res = await SMSIPPathUpdateIsUse(param);
            }else{
                res = await SMSIPPathBathUpdateIsUse(param);
            }
            if(res.success) uploadFun();
        }
        /*** handleSelectionChange 批量更新的复选框 */
        const handleSelectionChange = (val: any) => {
            multipleSelection = val;
        }

        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (val: String | Number, updateFun: Function) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val}
                try {
                    let res:any = await SMSIPPathDelete(param);
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        };

        /*** viewClick 查看风险点/巡检项目 */
        const viewClick = (val:any) => {
            getWorlkFun(val.id);
            worlkId = val.id;
            val.isVisible = true;
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        };

        /*** controlUseClick 提交事件 */
        const controlUseClick = () => {
            isUseDialog.value = false
        };

        /*** getDyFun 风险分析单元查询 */
        const getDyFun = async(id: number) => {
            let param: any = {l_IPPathId: id};
            let res: any = await SMSIPPathUnitList(param);
            if(res.success) return res.data;
        }
        
        /*** funClick */
        const funClick = (val:any, num: number) => {
            switch(num){
                case 1:
                    // 新增巡检项目（风险点）
                    let dyInfo = getDyFun(val.id);
                    dyInfo.then((res: any) => {
                        if(res.length === 0){
                            ElMessage({
                                type: 'warning',
                                message: '请先新增巡检分析单元',
                            })
                        }else{
                            let param: any = {};
                            param.info = val;
                            param.res = res;
                            repairItemInfo.value = JSON.stringify(param);
                            isItemDialog.value = true;
                        }
                    });
                    break;
                case 2:
                    // 新增风险点
                    repairFunInfo.value = JSON.stringify(val);
                    isFunDialog.value = true;
                    break;
            }
        }

        /*** cancelFunClick 巡检点取消事件 */
        const cancelFunClick = () => {
            isFunDialog.value = false;
        }

        /*** controlFunClick 风险点提交事件 */
        const controlFunClick = () => {
            isFunDialog.value = false;
        }
        
        /*** cancelTxtClick 变更序号改变事件 */
        const cancelTxtClick = () => {
            isTexDialog.value = false;
        }
        /*** controlTxtClick 变更序号提交事件 */
        const controlTxtClick = () => {
            getWorlkFun(worlkId);
            isTexDialog.value = false;
        }

        /*** cancelItemClick 新增巡检项目取消事件 */
        const cancelItemClick = () => {
            isItemDialog.value = false;
        }
        /*** controlItemClick 新增巡检项目提交事件 */
        const controlItemClick = () => {
            isItemDialog.value = false;
        }
        
        /*** ================================= 查询类数据操作 =================================  */
        let searchObj:any = reactive({});
        const basicsInfo: any = ref([]);
        const searInfo: any = ref();

        /*** 获取需要查询的数据 */
        const searchHandel = (val: any) => {
            searInfo.value = val;
        }

        /*** 查询按钮 */
        const searchClick = () => {
            let newObj = Object.keys(searInfo.value);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = searInfo.value[i];
                });
            }
        };

        /*** 重置按钮 */
        const resetClick = () => {
            searInfo.value = {};
            let newObj = Object.keys(searchObj);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
                });
            }
            initInfoFun();
        };

        let orgArr: any = [];
        // 获取数据
        const getFun = async () => {
            let ras: any = await sysOrgTree({}); // 部门
            // let rbs: any = await SMSDCAnalysisUnitList({});
            if(ras.success && ras.data.length !== 0){
                ras.data.map((item: any) => {
                    item.label = item.v_Name;
                    item.value = item.id;
                });
                orgArr = ras.data;
            }
            // if(rbs.success) unitArr.value = rbs.data;
        }
        
        /*** 初始化数据 */
        const initInfoFun = () => {
            basicsInfo.value = [{
                    typeId: 'i_Name', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_Name', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '巡检线路名称', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                },{
                    typeId: 's_Org', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'l_OrgId', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '部门', // placeholder数据
                    defaultProp: orgArr, // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                    propsVal: { checkStrictly: true , label: 'title', value: 'id', children: 'children' }, // 级联选择器 --- 选填
                },{
                    typeId: 'i_Levele', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_Levele', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '层级', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                },{
                    typeId: 's_Use', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'isUse', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '是否启用', // placeholder数据
                    defaultProp: [
                        {label: '启用', value: true},
                        {label: '停用', value: false},
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                }
            ]
        }
        
        onMounted(async () => {
            await getFun();
            initInfoFun(); 
        });
        /*** ================================= 查询类数据操作 =================================  */

        /*** ================================= 导出数据函数操作 ================================= */
        const excelRef: any = ref(null);
        const handleExport = () => {
            if(excelRef.value){
                if(excelRef.value.data.length !== 0){
                    let tableExcel: any = [];
                    let tableArr = excelRef.value.data;
                    tableArr.map((item: any) => {
                        let tableObj: any = {};
                        tableObj['巡检线路名称'] = item.v_Name ? item.v_Name : '-';
                        tableObj['部门名称'] = item.v_OrgName ? item.v_OrgName : '-';
                        tableObj['层级'] = item.v_Levele ? item.v_Levele : '-';
                        tableObj['是否启用'] = item.isUse ? '是' : '否';
                        tableExcel.push(tableObj);
                    });
                    exportToExcel(tableExcel,'设备巡检路线.xlsx');
                }else{
                    ElMessage({
                        type: 'error',
                        message: '暂无数据导出',
                    })
                }
            }
        }
        /*** ================================= 导出数据函数操作 ================================= */

        return {
            ...getTableData(SMSIPPathPage,{},searchObj),
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            nodeClick,
            repairInfo,
            deleteHandle,
            documentClick,
            isFunDialog,
            cancelFunClick,
            controlFunClick,
            repairFunInfo,
            viewClick,
            filterSearch,
            batchHandle,
            handleSelectionChange,
            funClick,
            gridLoading,

            // 页中页
            gridData,
            activePageNo,
            activePageSize,
            activeTotalRows,
            activeHandleSizeChange,
            activeHandleCurrentChange,
            activeClick,
            closeHandle,
            repairTexInfo,
            isTexDialog,
            cancelTxtClick,
            controlTxtClick,
            repairItemInfo,
            isItemDialog,
            cancelItemClick,
            controlItemClick,
            unitArr,

            // 导出Excel
            excelRef,
            handleExport,

            // 查询事件
            basicsInfo,
            searchHandel,
            searchClick,
            resetClick,
        }
    },
} )
</script>
<style lang="scss"> @import '../style/public.scss'; </style>
<style scoped lang="scss">
    .search-s{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        width: 100%;
        .search-s-l{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            width: 98%;
        }
    }
    .grid-table{
        :deep(.el-scrollbar__wrap){
            max-height: 20vh;
            overflow-y: auto;
        }
    }
    #inspection-route {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        .upload-demo{
            margin-left: 12px;
            margin-top: 2px;
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
.clear-bg{
    background-color: transparent !important;
}
</style>